<!-- <template>
    <div>
        <vxe-table border resizable :tree-config="{ transform: true }" :data="tableData">
            <vxe-column field="labName" title="实验名称" tree-node></vxe-column>
            <vxe-column type="expand" width="60">
                <template #content="{ row, rowIndex }">
                    <ul class="expand-wrapper">
                        <li>
                            <span>学生姓名：</span>
                            <span>{{ row.id }}</span>
                        </li>
                        <li>
                            <span>心得体会内容：</span>
                            <span>{{ row.name }}</span>
                        </li>
                    </ul>
                </template>
            </vxe-column>
            <vxe-column field="className" v-if="userType == '2'" title="班级"></vxe-column>
             <vxe-column field="date" title="Date"></vxe-column> 
        </vxe-table>

    </div>
</template>

<script>
import { getFeelingListApi } from "@/api/feeling"
import SysDialog from "@/components/System/SysDialog.vue";
import Cookies from "js-cookie";
export default {
    name: "feeling",
    data() {
        return {
            params: {
                name: "",
                sessionId: '',
                currentPage: 1,
                pageSize: 10,
                total: 0,
            },
            tableData: [],
            userType: "",
        }
    },
    created() {
        this.getList();
        this.userType = localStorage.getItem("type");
    },
    mounted() {
        this.$nextTick(() => {
        this.tableHeight = window.innerHeight - 200;
        });
        this.getList()
    },
    methods: {
    //获取列表
        async getList() {
            var res = await getFeelingListApi(this.params);
            console.log(res);
            var success = res.success
            if (success) {
                this.tableData = res.data;
                console.log(this.tableData);
                this.params.total = res.data.total;
            }
        }
    }
};

</script>
<style scoped>
.expand-wrapper {
    padding: 20px;
}
</style> -->

<template>
    <el-main>
        <el-table :data="tableData5" style="width: 100%">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" v-for="item in props.row.feelingList" inline
                        class="demo-table-expand">
                        <el-form-item label="学生姓名" v-if="userType == '2'">
                            <span>{{ item.studentName }}</span>
                        </el-form-item>
                        <el-form-item label="提交内容">
                            <span>{{ item.content }}</span>
                        </el-form-item>
                        <el-button v-if="userType == '1'" type="primary" size="small" icon="el-icon-edit"
                            @click="editFeeling(item)">编辑</el-button>
                        <el-button v-if="userType == '1'" type="danger" size="small" icon="el-icon-delete"
                            @click="deleteFeeling(item)">删除</el-button>
                    </el-form>
                </template>
            </el-table-column>
            <!-- <el-table-column label="id" prop="baseId">
        </el-table-column> -->
            <el-table-column label="实验名" prop="labName">
            </el-table-column>
            <el-table-column label="班级名" v-if="userType == '2'" prop="className">
            </el-table-column>
            <el-table-column label="操作" v-if="userType == '1'" width="300">
                <template slot-scope="scope">
                    <el-button type="primary" size="small" icon="el-icon-edit"
                        @click="addFeeling(scope.row)">添加心得体会</el-button>
                </template>
            </el-table-column>
        </el-table>


        <sys-dialog :title="dialog.title" :visible="dialog.visible" :width="dialog.width" :height="dialog.height"
            @onClose="onClose" @onConfirm="onConfirm">
            <div slot="content">
                <el-form :model="addContent" ref="addForm" :rules="rules" label-width="80px" :inline="false"
                    size="small">
                    <el-form-item prop="content" label="心得体会内容">
                        <el-input type="textarea" v-model="addContent.content" :rows="5"></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </sys-dialog>
    </el-main>
</template>

<style>
.demo-table-expand {
    font-size: 0;
}

.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}

.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}
</style>

<script>
import { getFeelingListApi, addFeelingListApi, updateFeelingListApi, deleteFeelingListApi, } from "@/api/feeling"
import SysDialog from "@/components/System/SysDialog.vue";
import Cookies from "js-cookie";

export default {
    name: "feeling",
    components: {
        SysDialog,
    },
    data() {
        return {
            tableHeight: 0,
            dialog: {
                title: "",
                visible: false,
                width: 550,
                height: 320,
            },
            tableData5: [
                {
                    baseId: 0,
                    labName: '实验一',
                    className: '一班',
                    feelingList: [
                        {
                            studentName: "",
                            content: ""
                        },
                        {
                            studentName: "",
                            content: ""
                        }
                    ]
                },
                {
                    baseId: 0,
                    labName: '实验一',
                    className: '一班',
                    feelings: [
                        {
                            studentName: "",
                            content: ""
                        },
                        {
                            studentName: "",
                            content: ""
                        }
                    ]
                }
            ],
            params: {
                name: "",
                sessionId: '',
                currentPage: 1,
                pageSize: 10,
                total: 0,
            },
            addContent: {
                id: 0,
                tno: 0,
                baseId: 0,
                name: "",
                className: "",
                content: ""
            },
            userType: "",
            rules: {
                content: [
                    {
                        required: blur,
                        trigger: "change",
                        message: "请输入实验内容!",
                    },
                ],
            },
        }
    },
    created() {
        this.getList();
        this.userType = localStorage.getItem("type");
    },
    mounted() {
        this.$nextTick(() => {
            this.tableHeight = window.innerHeight - 200;
        });
        this.getList()
    },
    methods: {
        //获取列表
        async getList() {
            var res = await getFeelingListApi(this.params);
            console.log(res);
            var success = res.success
            if (success) {
                this.tableData5 = res.data;
                console.log(this.tableData5.baseId);
                this.params.total = res.data.total;
            }
        },
        //新增
        addFeeling(row) {
            this.$resetForm("addForm", this.addContent);
            this.addContent.baseId = row.baseId;
            console.log("row", row.labName);
            this.addContent.name = row.labName;
            console.log("res", this.addContent.name);
            this.addContent.type = "0";
            this.dialog.title = "新增心得体会";
            this.dialog.visible = true;
        },
        // 编辑
        editFeeling(row) {
            this.dialog.title = "编辑心得体会";
            //清空表单数据
            this.$resetForm("addForm", this.addContent);
            this.addContent.type = "1";
            this.addContent.id = row.id;

            // 编辑回显
            this.$objCoppy(row, this.addContent);
            this.dialog.visible = true;
        },
        // 删除
        async deleteFeeling(row) {
            let confirm = await this.$myconfirm("确定删除该心得体会吗？");
            if (confirm) {
                let res = await deleteFeelingListApi({ id: row.id });

                //删除成功，刷新列表
                if (res.success) {
                    this.getList();
                    this.$message.success(res.msg);
                }
            }
        },
        //确认对话框
        onConfirm() {
            this.$refs.addForm.validate(async (valied) => {
                if (valied) {
                    var res = null;
                    if (this.addContent.type == "0") {
                        console.log(this.addContent);
                        res = await addFeelingListApi(this.addContent);
                    } else {
                        console.log(this.addContent);
                        res = await updateFeelingListApi(this.addContent);
                    }
                    if (res.success) {
                        //请求成功 刷新列表
                        this.getList();
                        this.dialog.visible = false;
                        this.$message.success(res.msg);
                    }
                }
            });
        },
        //关闭对话框
        onClose() {
            this.dialog.visible = false;
        },
        //页容量改变时触发
        sizeChange(val) {
            this.params.pageSize = val;
            this.getList();
        },
        //当前页数改变时触发
        currentChange(val) {
            this.params.currentPage = val;
            this.getList();
        },
    }
}
</script>